import React, { useCallback, useRef } from 'react';
import { GTable } from 'geminis-react';
import { Divider } from 'antd';
import styles from '../category/components/tree.less';
import { CategoryTree } from '@/pages/workflow/category/components/tree';
import { ModelEdit } from '@/pages/workflow/model/components/edit';

export default () => {
  const tree = useRef<any>();
  const table = useRef<any>();

  const onTreeSelected = useCallback((selection: any) => {
    table.current.loadData({ categoryId: selection.selectedKeys[0] });
  }, []);

  const getCategoryId = useCallback(() => {
    return tree.current?.selection?.selectedNodes[0]?.data.pathId;
  }, []);

  const onSaved = useCallback(() => {
    table.current.loadData();
  }, []);

  const schema = {
    headerTitle: '流程信息',
    rowKey: 'deploymentId',
    data: {
      url: '/api/workflow/model',
    },
    manualRequest: true,
    toolBarRender: () => [
      <ModelEdit
        text="新建"
        icon="icon-plus"
        type="primary"
        getCategoryId={getCategoryId}
        onSaved={onSaved}
      />,
    ],
    action: {
      row: {
        render: (record: any) => [
          <ModelEdit
            text="修改"
            type="link"
            key={record.id}
            modelId={record.id}
            getCategoryId={getCategoryId}
            onSaved={onSaved}
          />,
        ],
        delete: true,
      },
      idGetter: {
        deleteId: (record: any) => record.deploymentId,
      },
    },
  };

  return (
    <div className={styles.main}>
      <div className={styles.tree}>
        <CategoryTree ref={tree} onSelected={onTreeSelected} />
      </div>
      <Divider type="vertical" className={styles.fullHeight} />
      <div className={styles.content}>
        <GTable
          ref={table}
          schema={schema}
          schemaPath="/workflow-pc/schema/model/table.json"
        />
      </div>
    </div>
  );
};
